<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="box">
            <view class="work-title">地址信息</view>
            <view class="item" v-if="detail.shipper">
                <view class="grey">发货方</view>
                <view class="item-right">{{detail.shipper}}</view>
            </view>
            <view class="item" v-if="detail.shipper_contact">
                <view class="grey">联系人</view>
                <view class="item-right">{{detail.shipper_contact}}</view>
            </view>
            <view class="item" v-if="detail.shipper_phone">
                <view class="grey">联系方式</view>
                <view class="item-right">{{detail.shipper_phone}}</view>
            </view>
            <view class="item" v-if="detail.address">
                <view class="grey">收货地址</view>
                <view class="item-right">{{detail.address}}</view>
            </view>
            <view class="item" v-if="detail.position">
                <view class="grey">经营位置</view>
                <view class="item-right">{{detail.position}}</view>
            </view>
            <view class="item" v-if="detail.recipient_contact">
                <view class="grey">联系人</view>
                <view class="item-right">{{detail.recipient_contact}}</view>
            </view>
            <view class="item" v-if="detail.recipient_phone">
                <view class="grey">联系方式</view>
                <view class="item-right">{{detail.recipient_phone}}</view>
            </view>
            <view class="item" v-if="detail.remark">
                <view class="grey">备注</view>
                <view class="item-right">{{detail.remark}}</view>
            </view>
        </view>
        
        <view class="box">
            <view class="work-title">订单信息</view>
            <view class="item" v-if="detail.out_trade_no">
                <view class="grey">订单编号</view>
                <view class="item-right">{{detail.out_trade_no}}</view>
            </view>
            <view class="item" v-if="detail.line">
                <view class="grey">运输线路</view>
                <view class="item-right">{{detail.line}}</view>
            </view>
            <view class="item" v-if="detail.origin">
                <view class="grey">始发地</view>
                <view class="item-right">{{detail.origin}}</view>
            </view>
            <view class="item" v-if="detail.destination">
                <view class="grey">目的地</view>
                <view class="item-right">{{detail.destination}}</view>
            </view>
            <view class="item" v-if="detail.loading_site">
                <view class="grey">装车地点</view>
                <view class="item-right">{{detail.loading_site}}</view>
            </view>
            <view class="item" v-if="detail.loading_time">
                <view class="grey">预计装货时间</view>
                <view class="item-right">{{detail.loading_time}}</view>
            </view>
            <!-- 拼车 -->
            <view class="item" v-if="detail.carriage">
                <view class="grey">车厢位置</view>
                <view class="item-right">{{detail.carriage}}</view>
            </view>
            <!-- 包车 -->
            <view class="item" v-if="detail.vehicle">
                <view class="grey">车辆类型</view>
                <view class="item-right">{{detail.vehicle}}</view>
            </view>
            <view class="item" v-if="detail.length">
                <view class="grey">车长</view>
                <view class="item-right">{{detail.length}}</view>
            </view>
            
            <view class="item" v-if="detail.pay_time">
                <view class="grey">支付时间</view>
                <view class="item-right">{{detail.pay_time}}</view>
            </view>
            <view class="item" v-if="detail.load_end_time">
                <view class="grey">装车完成时间</view>
                <view class="item-right">{{detail.load_end_time}}</view>
            </view>
            <view class="item" v-if="detail.expect_time">
                <view class="grey">预计到达时间</view>
                <view class="item-right">{{detail.expect_time}}</view>
            </view>
            <view class="item" v-if="detail.arrival_time">
                <view class="grey">司机到达时间</view>
                <view class="item-right">{{detail.arrival_time}}</view>
            </view>
            <view class="item" v-if="detail.unload_time">
                <view class="grey">开始卸货时间</view>
                <view class="item-right">{{detail.unload_time}}</view>
            </view>
            <view class="item" v-if="detail.finish_time">
                <view class="grey">卸货完成时间</view>
                <view class="item-right">{{detail.finish_time}}</view>
            </view>
            
        </view>
        
        <view class="box" v-for="(item, index) in detail.goods" :key="index">
            <view class="item" v-if="item.type">
                <view class="grey">货物类型</view>
                <view class="item-right">{{item.type}}</view>
            </view>
            <view class="item" v-if="item.goods">
                <view class="grey">产品名称</view>
                <view class="item-right">{{item.goods}}</view>
            </view>
            
            <!-- 拼车 -->
            <view class="item" v-if="item.brand">
                <view class="grey">品牌</view>
                <view class="item-right">{{item.brand}}</view>
            </view>
            <view class="item" v-if="item.packages">
                <view class="grey">包装</view>
                
                <view class="item-right">{{item.packages}}</view>
            </view>
            <view class="item" v-if="item.model">
                <view class="grey">型号</view>
                <view class="item-right">{{item.model}}</view>
            </view>
            
            <view class="item" v-if="item.num">
                <view class="grey">件数</view>
                <view class="item-right">{{item.num}}件</view>
            </view>
            <view class="item" v-if="item.send_num">
                <view class="grey">实际件数</view>
                <view class="item-right">{{item.send_num}}件</view>
            </view>
            <view class="item" v-if="item.unload_num">
                <view class="grey">实际卸车件数</view>
                <view class="item-right">{{item.unload_num}}件</view>
            </view>
            
            <!-- 拼车 -->
            <view class="item" v-if="item.estimate_weight">
                <view class="grey">预估重量</view>
                <view class="item-right">{{item.estimate_weight}}斤</view>
            </view>
            <view class="item" v-if="item.send_weight>0">
                <view class="grey">实际重量</view>
                <view class="item-right">{{item.send_weight}}斤</view>
            </view>
            <view class="item" v-if="item.unload_weight>0">
                <view class="grey">实际卸货重量</view>
                <view class="item-right">{{item.unload_weight}}斤</view>
            </view>
            
            <!-- status ==2 待发货  （预估运费） status ==3||4 （发货运费）status ==5 卸货运费 -->
            <view class="price" v-if="detail.status ==2&&item.estimate_freight || detail.status ==3&&item.send_freight||detail.status ==4&&item.send_freight || detail.status ==5&&item.unload_freight">
                <view v-if="detail.status ==2&&item.estimate_freight">运费小计 <text class="price-num">{{item.estimate_freight}}</text>元</view>
                <view v-if="detail.status ==3&&item.send_freight||detail.status ==4&&item.send_freight">运费小计 <text class="price-num">{{item.send_freight}}</text>元</view>
                <view v-if="detail.status ==5&&item.unload_freight">运费小计 <text class="price-num">{{item.unload_freight}}</text>元</view>
            </view>
        </view>
        
        <view class="box">
            <view class="item" v-if="detail.num">
                <view class="grey">总件数</view>
                <view class="item-right">{{detail.num}}件</view>
            </view>
            <!-- 拼车 -->
            <view class="item" v-if="detail.weight">
                <view class="grey">总重量</view>
                <view class="item-right">{{detail.weight}}斤</view>
            </view>
            
            <view class="item" v-if="detail.zero_amount">
                <view class="grey">优惠</view>
                <view class="item-right">￥{{detail.zero_amount}}</view>
            </view>
            <view class="item" v-if="detail.freight">
                <view class="grey">预估总运费</view>
                <view class="item-right">￥{{detail.freight}}</view>
            </view>
            
            <view class="item" v-if="detail.order_amount">
                <view class="grey">总运费</view>
                <view class="item-right">￥{{detail.order_amount}}</view>
            </view>
        </view>
        
        <!-- <view class="box">
            <view class="item">
                <view class="u-flex">
                    <view class="l-icon">券</view>
                    <view class="grey">优惠券</view>
                </view>
                <view class="item-right2" @click="show = true">
                    <input type="text" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="u-flex">
                    <view class="l-icon">折</view>
                    <view class="grey">活动优惠</view>
                </view>
                <view class="item-right tip">-￥12.00</view>
            </view>
        </view> -->
        
        <view class="box" v-if="detail.cancel_reason">
            <view class="grey">取消原因</view>
            <view class="text">{{detail.cancel_reason}}</view>
        </view>
        
        <!-- <view class="footer">
            <view class="f-down">
                <view>
                    <view>
                        总运费
                        <text class="f-price">￥<text class="f-price-num">105.02</text></text>
                    </view>
                </view>
                <view class="f-btn" @click="doSubmit">去结算</view>
            </view>
        </view> -->
        
        <!-- 选择优惠券 -->
        <!-- <u-popup v-model="show" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
            <view class="pop-box-cou">
                <view class="pop-title">请选择优惠券</view>
                <view>
                    <scroll-view :scroll-y="true" style="height: 800rpx;">
                        <view>
                            <view class="pop-item" v-for="(item, index) in 2" :key="index">
                                <image src="../../static/image/cbg1.png" class="cou-bg"></image>
                                <view class="item-cou">
                                    <view class="item-cou-l">
                                        <view>
                                            <text class="cou-num">25</text>
                                            <text>元</text>
                                        </view>
                                        <view>无使用门槛</view>
                                    </view>
                                    <view class="item-cou-r">
                                        <view class="u-font-30 u-p-b-5 text-bold">发放优惠券</view>
                                        <view class="cou-time">有效期: 2017.03.10 - 2017.12.30</view>
                                    </view>
                                </view>
                            </view>
                            <view class="pop-cou-none" >
                                <image src="../../static/icon/price_04.png" class="price-04"></image>
                                <view>暂无可用优惠券</view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </u-popup> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                detail:'',
                id:'',
            };
        },
        onLoad(option) {
            if(option.id){
                this.id = option.id
            }
            this.orders_detail()
        },
        methods: {
            
            //获取列表
            orders_detail(){
                
                this.$ajax('orders_detail', {
                    user_token:this.$getTokens(),
                    order_id:this.id,//1找车 2车辆审核 3拒绝接单
                    out_trade_no:this.page,
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.detail = ret.detail
                	} else {
                		this.$toast(ret.detail.msg);
                	}
                    
                });
            },
            
            
            doSubmit() {
                uni.showModal({
                	title: '通知',
                	content: '运单结算待卸货管理员核对订单实际重量件数后，进入订单-待支付中结算支付',
                    showCancel: false,
                	success: (res) => {
                		if (res.confirm) {
                			
                		} else if (res.cancel) {
                			console.log('用户点击取消');
                		}
                	}
                });
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx 90px;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    .title{
        padding: 10rpx 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        color: #fff;
    }
    .top-icon{
        width: 69rpx;
        height: 69rpx;
        margin-right: 20rpx;
    }
    .dest{
        font-weight: bold;
    }
    
    .box{
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
    }
    .route{
        padding: 10rpx 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .line{
        width: 31rpx;
        height: 162rpx;
        margin-right: 15rpx;
    }
    .route-r{
        flex: 1;
        font-size: 34rpx;
        font-weight: bold;
    }
    .address{
        font-size: 28rpx;
        color: #999999;
        font-weight: normal;
    }
    
    .work-title{
        font-size: 32rpx;
        font-weight: bold;
        padding-top: 10rpx;
        padding-bottom: 15rpx;
    }
    .item{
        padding: 15rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item-right{
        flex: 1;
        text-align: right;
        font-weight: bold;
        padding-left: 30rpx;
    }
    .text{
        word-break: break-all;
        white-space: pre-line;
        padding-top: 5rpx;
    }
    .grey{
        color: #656565;
    }
    .list-title{
        font-size: 34rpx;
        color: #fff;
        background: linear-gradient(to right, #7fb1e4, #c7e1f9);
        border-radius: 20rpx;
        padding: 15rpx 30rpx;
        height: 120rpx;
        margin-bottom: -40rpx;
    }
    .price{
        padding: 25rpx 0 10rpx;
        border-top: 2rpx solid #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 28rpx;
    }
    .price-num{
        font-size: 40rpx;
        font-weight: bold;
        padding-left: 10rpx;
        padding-right: 5rpx;
    }
    
    .pt-box{
        padding: 35rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon-02{
        width: 55rpx;
        height: 55rpx;
        margin-right: 15rpx;
    }
    .pt-t1{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 20rpx;
    }
    .pt-t2{
        font-size: 22rpx;
        color: #929292;
    }
    .pt-t3{
        font-size: 22rpx;
        color: #ff5f2b;
    }
    
    .l-icon{
        width: 30rpx;
        height: 30rpx;
        background-color: #ff4926;
        border-radius: 10rpx;
        font-size: 20rpx;
        color: #fff;
        text-align: center;
        line-height: 30rpx;
        margin-right: 10rpx;
    }
    .item-right2{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .tip{
        color: #fe6a00;
        font-weight: normal;
    }
    
    
    .footer{
        width: 750rpx;
        height: 120rpx;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9;
    }
    .f-top{
        height: 50rpx;
        background-color: #ddebfa;
        font-size: 25rpx;
        color: #0c89ea;
        line-height: 50rpx;
        text-align: right;
        padding-right: 35rpx;
    }
    .f-down{
        padding: 15rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .f-price{
        color: #ff3f00;
        padding-left: 15rpx;
    }
    .f-price-num{
        font-size: 38rpx;
        font-weight: bold;
    }
    .f-tip{
        font-size: 22rpx;
        color: #656565;
        padding-top: 5rpx;
    }
    .f-tip-t{
        color: #000;
    }
    .f-btn{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 35rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }
    
    
    // 优惠券
    .pop-box-cou{
        padding: 0 30rpx;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 30rpx;
    }
    .pop-item{
        position: relative;
        margin-bottom: 20rpx;
    }
    .cou-bg{
        width: 694rpx;
        height: 176rpx;
    }
    .item-cou{
        width: 670rpx;
        height: 165rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 20rpx;
        top: 0;
    }
    .item-cou-l{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ff602c;
    }
    .cou-num{
        font-size: 44rpx;
        font-weight: bold;
    }
    .item-cou-r{
        padding-left: 70rpx;
        padding-right: 15rpx;
        flex: 1;
    }
    .cou-time{
        font-size: 24rpx;
        color: #8b8b8b;
    }
    .pop-cou-none{
        font-size: 30rpx;
        color: #9b9b9b;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 100rpx;
    }
    .price-04{
        width: 92rpx;
        height: 79rpx;
        margin-bottom: 20rpx;
    }
    

</style>
